<template>
  <el-card shadow="never" class="henader-card">
    <div class="flx-row">
      <el-form :inline="true" :model="queryData" style="flex: 1">
        <!-- 关键词搜索（带文字描述和清除按钮） -->
        <el-form-item label="关键词搜索：" label-width="120px">
          <el-input
            v-model="queryData.keyWord"
            placeholder="请输入产线/工站关键词"
            clearable
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="时间范围：" label-width="100px">
          <el-date-picker
            v-model="queryData.date"
            type="datetimerange"
            :shortcuts="shortcuts"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          />
        </el-form-item>

        <!-- 分页大小选择（下拉框） -->
        <el-form-item label="每页条数：" label-width="100px">
          <el-select
            v-model="queryData.size"
            @change="handleSizeChange"
            style="width: 180px"
          >
            <el-option label="10条/页" value="10" />
            <el-option label="20条/页" value="20" />
            <el-option label="50条/页" value="50" />
            <el-option label="100条/页" value="100" />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="flex-right">
        <el-button type="primary" :icon="Search" @click="initData" class="ml20">
          搜索
        </el-button>
        <el-button
          type="primary"
          :icon="Download"
          @click="educeExcel"
          class="mr20"
        >
          导出数据
        </el-button>
      </div>
    </div>
  </el-card>

  <!-- 表格和分页部分（保持不变） -->
  <el-card shadow="never">
    <el-table
      :data="tableData"
      :header-cell-style="{ backgroundColor: '#ecf5ff' }"
      border
      stripe
      style="width: 100%"
    >
      <!-- 表格列配置（同之前） -->
      <el-table-column
        v-for="item in tableColumns"
        :key="item.props"
        :prop="item.props"
        :label="item.label"
        :align="item.align"
        show-overflow-tooltip
        :fixed="item.fixed"
      >
        <!-- 模板内容（同之前） -->
        <template
          v-slot:default="scope"
          v-if="item.props === 'currentResultBool'"
        >
          <el-tag :type="scope.row.currentResultBool ? 'success' : 'danger'">
            {{ scope.row.currentResultBool ? "通过" : "未通过" }}
          </el-tag>
        </template>
        <template v-slot:default="scope" v-if="item.props === 'codeType'">
          <span>{{ scope.row.codeType ? "正常" : "异常" }}</span>
        </template>
        <template
          v-slot:default="scope"
          v-if="item.props === 'createTime' || item.props === 'updateTime'"
        >
          <span>{{ formatDate(scope.row[item.props]) }}</span>
        </template>
        <template v-slot:default="scope" v-if="item.props === 'tag1'">
          <el-tooltip :content="scope.row.tag1" placement="top">
            <span>{{
              scope.row.tag1 ? scope.row.tag1.substring(0, 10) + "..." : "-"
            }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件（保持不变） -->
    <el-pagination
      small
      background
      :page-size="queryData.size"
      layout="total, prev, pager, next, jumper"
      :total="total"
      class="mt-4"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import * as XLSX from "xlsx";
import { Search, Download } from "@element-plus/icons-vue";
import { getProcedureList } from "../../../api/modules/index";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { tableColumns } from "./options.js";

// 1. 查询参数（size默认10，支持下拉选择）
const queryData = ref({
  keyWord: "", // 搜索关键词
  page: 1, // 当前页码
  size: 10, // 每页条数（默认10）
  date: [], // 日期范围
});

// 2. 表格数据
const tableData = ref([]);
const total = ref(0);


// 3. 分页大小变更
const handleSizeChange = (val) => {
  queryData.value.size = val; // 更新每页条数
  queryData.value.page = 1; // 重置为第1页
  initData(); // 重新加载数据
};

// 4. 页码变更
const handleCurrentChange = (val) => {
  queryData.value.page = val;
  initData();
};

// 5. 初始化数据（带日期格式转换）
const initData = () => {
  // 格式化日期为UTC时间字符串
  const formatUTCDate = (date) => {
    if (!date) return "";
    const d = new Date(date);
    return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(
      2,
      "0"
    )}-${String(d.getUTCDate()).padStart(2, "0")} ${String(
      d.getUTCHours()
    ).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}:${String(
      d.getUTCSeconds()
    ).padStart(2, "0")}`;
  };

  const { date, ...restParams } = queryData.value;
  const params = {
    ...restParams,
    startTime: formatUTCDate(date?.[0]),
    endTime: formatUTCDate(date?.[1]),
  };

  getProcedureList(params)
    .then((res) => {
      if (res.result === 1) {
        total.value = res.data.total;
        tableData.value = res.data.items;
      } else {
        ElMessage.error(res.message || "获取数据失败");
      }
    })
    .catch((err) => {
      ElMessage.error("网络错误，请重试");
    });
};

// 6. 日期格式化（显示用）
const formatDate = (isoString) => {
  if (!isoString) return "";
  const date = new Date(isoString);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};

// 7. 日期快捷选项
const shortcuts = [
  {
    text: "今天",
    value: () => [
      new Date(new Date().setHours(0, 0, 0, 0)),
      new Date(new Date().setHours(23, 59, 59, 999)),
    ],
  },
  {
    text: "昨天",
    value: () => [
      new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
      new Date(new Date().setHours(23, 59, 59, 999) - 24 * 60 * 60 * 1000),
    ],
  },
  {
    text: "近7天",
    value: () => [
      new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
      new Date(),
    ],
  },
];

// 8. 页面加载时初始化
onMounted(() => {
  initData();
});

const educeExcel = () => {
  try {
    // 检查是否有数据
    if (!tableData.value.length) {
      ElMessage.warning("当前页没有数据可导出");
      return;
    }

    // 1. 处理数据格式（与表格显示一致）
    const exportData = tableData.value.map((row) => {
      const item = { ...row };
      // 转换状态字段（和表格显示保持一致）
      if (row.currentResultBool !== undefined) {
        item.currentResultBool = row.currentResultBool ? "通过" : "未通过";
      }
      if (row.codeType !== undefined) {
        item.codeType = row.codeType ? "正常" : "异常";
      }
      // 转换日期格式（和表格显示保持一致）
      if (row.createTime) item.createTime = formatDate(row.createTime);
      if (row.updateTime) item.updateTime = formatDate(row.updateTime);
      return item;
    });

    // 2. 生成Excel
    const data = XLSX.utils.json_to_sheet(exportData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, data, "条码报表记录"); // 工作表名

    // 3. 自定义文件名（包含当前时间）
    const fileName = `条码报表记录_${new Date()
      .toLocaleString()
      .replace(/[:/]/g, "-")}.xlsx`;
    XLSX.writeFile(wb, fileName);

    ElMessage.success("导出成功");
  } catch (error) {
    console.error("导出失败", error);
    ElMessage.error("导出失败，请重试");
  }
};
</script>

<style lang="scss" scoped>
.henader-card {
  margin-bottom: 20px;
  padding: 15px 20px;
}

// 表单项目间距
:deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 10px;
}

// 输入框宽度
.input-width {
  width: 180px;
}

// 日期选择器宽度
:deep(.el-date-editor) {
  width: 300px;
}

// 分页样式
.mt-4 {
  float: right;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 20px;
}

// 表格样式
:deep(.el-table .cell) {
  white-space: normal !important;
  word-break: break-all;
  line-height: 1.5;
}
</style>
